<template>
  <div ref="chart" style="height: 100%" />
</template>
<script>
import { Chart } from '@antv/g2';
import { getTicks } from '@/utils/chartScale.js';
import { numFormat } from '@/utils/filter.js';
export default {
  /*
  data:     所要传输的数据
  x:        x轴变量名(有默认值)
  y:        y轴变量名(有默认值)
  s:        系列值
  color:    图表颜色
  text:     tooltip中的文字，数组格式
  unit:     单位
  area:     控制是否显示面积
  sText:    s系列值顺序
*/
  name: 'LineChart',
  props: {
    chartData: {
      type: Array,
      required: true
    },
    x: {
      type: String,
      default: 'x'
    },
    y: {
      type: String,
      default: 'y'
    },
    s: {
      type: String,
      default: 's'
    },
    color: {
      type: Array,
      required: true
    },
    text: {
      type: Array,
      required: true
    },
    unit: {
      type: String,
      required: true
    },
    area: {
      type: Boolean,
      default: false
    },
    sText: {
      type: Array,
      required: false
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    xCount: {
      type: Number,
      required: false
    },
    position: {
      type: String,
      default: 'top-right'
    },
    point: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      handler() {
        this.updateData();
      }
    },
    // 单位更新
    unit() {
      this.chart.annotation().clear(true);
      this.addAnnotation();
    }
  },
  mounted() {
    this.initChart();
    this.drawChart();
    this.addAnnotation();
  },
  methods: {
    getTicks,
    initChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight,
        appendPadding: [22 * ratio, 0, 2 * ratio, 0]
      });
    },
    drawChart() {
      const ratio = window.ratio || 1;
      const x = this.x;
      const y = this.y;
      const s = this.s;
      this.chart.data(this.chartData);
      this.chart.scale(y, {
        min: 0,
        tickCount: 2,
        tickMethod: this.getTicks
      });
      if (this.xCount) {
        this.chart.scale(x, {
          tickCount: this.xCount
        });
      }
      // 提示框
      this.chart.tooltip({
        shared: true,
        showCrosshairs: true,
        crosshairs: {
          line: {
            style: {
              stroke: '#00FDFF',
              lineDash: [3 * ratio, 3 * ratio],
              lineWidth: 1 * ratio
            }
          }
        }
        // customItems: (items) => {
        //   items.forEach((item, idx) => {
        //     item.name = this.text[idx];
        //     item.value = numFormat(Number(item.value));
        //   });
        //   return items;
        // },
        // domStyles: {
        //   'g2-tooltip-title': {
        //     fontSize: '.875rem',
        //     color: '#8D8D8D'
        //   },
        //   'g2-tooltip-list-item': {
        //     fontSize: 0,
        //     overflow: 'hidden'
        //   },
        //   'g2-tooltip-name': {
        //     fontSize: '.75rem',
        //     color: '#8D8D8D'
        //   },
        //   'g2-tooltip-value': {
        //     fontSize: '.75rem',
        //     color: 'rgba(0, 0, 0, 0.6)',
        //     fontWeight: '780'
        //   }
        // }
      });
      // x轴
      this.chart.axis(x, {
        label: {
          style: {
            fill: '#ADADAD',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular',
            lineHeight: 14 * ratio
          },
          offset: 5 * ratio
        },
        line: {
          style: {
            stroke: '#FFFFFF',
            strokeOpacity: 0.4,
            lineWidth: 1 * ratio
          }
        },
        tickLine: null
      });
      // y轴
      this.chart.axis(y, {
        label: {
          style: {
            fill: '#ADADAD',
            fontSize: 12 * ratio,
            fontFamily: 'Helvetica-regular'
          },
          formatter: (text) => {
            return numFormat(Number(text));
          },
          offset: 8 * ratio,
          autoHide: false
        },
        line: null,
        grid: null
      });
      // 图例
      this.chart.legend(false);
      if (this.showLegend) {
        this.chart.appendPadding = [-8 * ratio, 0, 0, 0];
        this.chart.legend({
          position: this.position,
          marker: {
            symbol: 'hyphen',
            spacing: 0,
            style: {
              r: 5 * ratio,
              lineWidth: 5 * ratio,
              lineCap: 'butt'
            }
          },
          itemName: {
            style: {
              fontSize: 12 * ratio,
              fill: '#D8D8D8'
            }
          }
        });
      }
      this.chart
        .line()
        .position(`${x}*${y}`)
        .shape('smooth')
        .size(2 * ratio)
        .color(s, this.color)
        .animate({
          appear: {
            animation: 'path-in',
            delay: 0,
            duration: 2000
          }
        });
      this.chart
        .point()
        .position(`${x}*${y}`)
        .size(this.point ? 3 * ratio : 0)
        .style('s', (val) => {
          if (!this.sText) {
            return { fill: this.color[0], stroke: this.color[0] };
          }
          for (const i in this.sText) {
            if (this.sText[i] === val) {
              return { fill: this.color[i], stroke: this.color[i] };
            }
          }
        })
        .tooltip(false);
      if (this.area) {
        this.chart
          .area()
          .position(`${x}*${y}`)
          .shape('smooth')
          .color(s, this.color)
          .style({
            fillOpacity: 0.1
          })
          .tooltip(false)
          .animate({
            appear: {
              animation: 'fade-in',
              delay: 0,
              duration: 2000
            }
          });
      }
      this.chart.render();
    },
    addAnnotation() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      // 单位标注
      this.chart.annotation().text({
        content: this.unit,
        position: ['end', 'start'],
        style: {
          fill: '#ADADAD',
          fontSize: 12 * ratio,
          fontFamily: 'Helvetica-regular'
        },
        background: {
          padding: 2 * ratio
        },
        offsetY: -ref.clientHeight + 28 * ratio,
        offsetX: -ref.clientWidth + this.chart.autoPadding.right
      });
      this.chart.render();
    },
    updateData() {
      this.chart.changeData(this.chartData);
      this.chart.render(true);
      // this.chart.destroy();

      // this.chart.changeData(this.chartData);
    }
  }
};
</script>
